<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
require('echarts/theme/macarons')
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'time-line-action'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el, 'macarons')
      const biao =
        'https://www.makeapie.cn//asset/get/s/data-1594806168739-dBZc3TyU8.png'

      // let xdata = ['2020-04-15', '2020-05-15', '2020-06-15', '2020-07-15', '2020-08-15', '2020-09-15', '2020-10-15', '2020-11-15'],
      //     data = [120, 90, 10, 80, 90, 20, 56, 150];

      const xdata = [
        '2008年10月',
        '2009年11月',
        '2013年11月',
        '2015年6月',
        '2015年9月',
        '2020年11月',
        '2021年7月',
        '2022年6月'
      ]
      const data1 = [8, 6, 4, 2, 4, 6, 8, 6]
      const dataMess = [
        {
          index: 8,
          mess: '中国政府发布《中国应\n对气候变化的政策与行动》\n白皮书'
        },
        {
          index: 6,
          mess: '中国宣布到2020年单位\n国内生产总值二氧化碳\n下降40%至45%的行动目标'
        },
        {
          index: 4,
          mess: '中国发布《国家适应气\n候变化战略》。'
        },
        {
          index: 2,
          mess: '中国向联合国秘书处提\n交了应对气候变化国家自\n主贡献文件'
        },
        {
          index: 4,
          mess: '中国宣布出资200亿元人\n民币建立"中国气候变化\n南南合作基金"'
        },
        {
          index: 6,
          mess: '中国宣布二氧化碳排放力争\n于2030年前达到峰值'
        },
        {
          index: 8,
          mess: '中国碳排放权交易市场\n正式启动上线交易'
        },
        {
          index: 6,
          mess: '中国发布《国家适应气\n候变化战略 2035》'
        }
      ]

      const labelMess = function (param) {
        return (
          `{b|${param.name}}\n ` + `{value|${dataMess[param.dataIndex].mess}}`
        )
      }

      this.chart.setOption({
        grid: {
          top: 140,
          right: 40,
          left: 40,
          bottom: 30
        },
        xAxis: [
          {
            type: 'category',
            color: '#008acd',
            data: xdata,
            axisPointer: {
              type: 'line'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              fontWeight: 600
            }
          }
        ],

        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },

            splitLine: {
              show: false
            }
          }
        ],
        dataZoom: [
          {
            show: true,
            height: 10,
            // xAxisIndex: [0],
            bottom: 30,
            startValue: 0,
            endValue: 8,
            handleIcon:
              'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
            handleSize: '200%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 5
            },
            backgroundColor: '#DEE3F4',
            fillerColor: 'rgba(11, 202, 204, .5)'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            width: 20,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            type: 'pictorialBar',
            data: data1,
            barWidth: 2,
            symbol: 'rect',
            itemStyle: {
              normal: {
                color: {
                  //图形颜色
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#D0D6E5' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#D0D6E5' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                },
                shadowColor: '#D0D6E5',
                shadowBlur: 1
              }
            },
            label: {
              normal: {
                show: true,
                width: 120,
                height: 100,
                padding: [-33, -4, 0, 0],
                backgroundColor: '#44cef6',
                shadowColor: '#0bcacc',
                shadowBlur: 4,
                borderRadius: 5,
                position: 'top',
                // overflow: scroll,
                formatter: function (params) {
                  return labelMess(params) + ['{sj|}'].join('')
                },
                rich: {
                  b: {
                    color: '#2e4e7e',
                    fontWeight: 600,
                    fontSize: 10,
                    lineHeight: 30,
                    padding: [-55, 0, 0, 5],
                    align: 'left'
                  },
                  sj: {
                    backgroundColor: {
                      image: biao
                    },
                    align: 'right',
                    margin: [-20, 0, 0, 0],
                    width: 20,
                    height: 20
                  },
                  value: {
                    lineHeight: 2,
                    fontSize: 9,
                    padding: [-50, 0, 0, 10],
                    color: '#065279'
                  }
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>
